"use client"

import { ColumnDef } from "@tanstack/react-table"
import { TicketTemplate } from "@/types/template"
import { Button } from "@/components/ui/button"
import { ArrowUpDown, MoreHorizontal, Pencil, Trash2, Eye, FileEdit, FileText, ListChecks } from "lucide-react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import StatusBadge from "@/components/status-badge"
import Link from "next/link"

interface ColumnActionsProps {
  onEdit: (template: TicketTemplate) => void
  onDelete: (template: TicketTemplate) => void
}

export const columns = ({ onEdit, onDelete }: ColumnActionsProps): ColumnDef<TicketTemplate>[] => [
  {
    accessorKey: "name",
    header: ({ column }) => {
      return (
        <Button
          variant="ghost"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
          className="hover:bg-transparent"
        >
          模板名称
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </Button>
      )
    },
    cell: ({ row }) => (
      <div className="font-medium flex items-center">
        <FileText className="h-4 w-4 mr-2 text-primary" />
        {row.getValue("name")}
      </div>
    ),
  },
  {
    accessorKey: "type",
    header: "票种类型",
    cell: ({ row }) => (
      <StatusBadge status={row.getValue("type") === "送电操作" ? "primary" : "warning"}>
        {row.getValue("type")}
      </StatusBadge>
    ),
  },
  {
    accessorKey: "description",
    header: "描述",
    cell: ({ row }) => (
      <div className="text-muted-foreground max-w-xs truncate" title={row.getValue("description")}>
        {row.getValue("description")}
      </div>
    ),
  },
  {
    accessorKey: "steps",
    header: "步骤数",
    cell: ({ row }) => {
      const steps = row.getValue("steps") as any[]
      return (
        <div className="flex items-center">
          <ListChecks className="h-4 w-4 mr-2 text-muted-foreground" />
          <span>{steps.length} 个步骤</span>
        </div>
      )
    },
  },
  {
    id: "actions",
    cell: ({ row }) => {
      const template = row.original

      return (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="h-8 w-8 p-0 rounded-full hover:bg-muted">
              <span className="sr-only">打开菜单</span>
              <MoreHorizontal className="h-4 w-4" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="rounded-lg card-shadow">
            <DropdownMenuLabel>操作</DropdownMenuLabel>
            <DropdownMenuItem className="cursor-pointer">
              <Link href={`/tickets/create?templateId=${template.id}`} className="flex items-center w-full">
                <Eye className="mr-2 h-4 w-4" />
                使用此模板
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem className="cursor-pointer">
               <Link href={`/admin/templates/${template.id}/edit`} className="flex items-center w-full">
                <FileEdit className="mr-2 h-4 w-4" />
                编辑步骤
              </Link>
            </DropdownMenuItem>
            <DropdownMenuItem 
              onClick={() => onEdit(template)}
              className="cursor-pointer flex items-center"
            >
              <Pencil className="mr-2 h-4 w-4" />
              编辑信息
            </DropdownMenuItem>
            <DropdownMenuItem
              className="text-destructive cursor-pointer flex items-center"
              onClick={() => onDelete(template)}
            >
              <Trash2 className="mr-2 h-4 w-4" />
              删除
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      )
    },
  },
] 